<!DOCTYPE html>
<html>

<head>
    <title>{$site_info.site_name|default='51DESIGN'} | {$site_info.site_seo_title}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head" />
    <link rel="stylesheet" type="text/css" href="/assets/dist/plugins/dropload/dropload.css?{:time()}">
</head>

<body class="page-index bg-light">
    <div class="main">
        <div class="tab">
            <a href="javascript:;" class="item cur">校友圈</a>
        </div>
        <div class="content">
            <div class="lists"></div>
        </div>
    </div>

    <div class="post-article bg-primary rounded-circle">
        <!-- <a href="#" class="text-white post-article-btn"><i class="fa fa-edit"></i></a> -->
        <a href="{:cmf_url('portal/article/add')}" class="text-white"><i class="fa fa-edit"></i></a>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="postArticleBox" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">发表新话题</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{:url('portal/article/addPost')}" method="post" class="form-horizontal js-ajax-form">
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="hidden" class="form-control" name="post[categories]" id="post_category_id" value="0">
                            <input type="text" class="form-control" id="post_category" placeholder="选择话题分类" readonly="readonly">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" name="post[post_title]" id="post_title" placeholder="话题标题">
                            <input type="hidden" class="form-control" name="post[post_keywords]" value="0">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" name="post[post_content]" id="post_content" rows="10" placeholder="写点什么"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-light" data-dismiss="modal" class="mr-4">取消</button>
                        <button type="submit" class="btn btn-primary js-ajax-submit"> 发布 </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="postCategoryBox" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">选择分类</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="list-unstyled" id="categories">
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <include file="public@scripts" />
    <include file="public@footer" />
    <script>
    $(function() {
        var user;
        //用户登录
        $.post("{:url('user/index/isLogin')}", {}, function(data) {
            user = data;
            console.log(data);
            if (data.code == 1) {
                if (data.data.user.avatar) {}
            }
        });


        $('.post-article-btn').on("click",function(e){
            e.preventDefault();
            //用户为登录
            if (user.code == 0) {
                alert("您未登录，请先登录！");
                window.location.href = "{:cmf_url('user/login/index')}";
            } else {
                $('#postArticleBox').modal('show');
            }
        });

        //点击选择分类出现分类选择框
        $('#post_category').on('click', function(event) {
            event.preventDefault();
            $.ajax({
                type: 'GET',
                url: '/api/portal/categories',
                dataType: 'json',
                success: function(data) {
                    var html = '';
                    for (var i = 0; i < data.data.length; i++) {
                        var cat = data.data[i];
                        html += '<li data-id="' + cat.id + '" class="py-2 border-bottom clearfix" onclick="selectCat(this);"><img style="width:24px;" class="rounded" src="' + cat.more.thumbnail + '" alt=""><span class="font-weight-bold mx-4" style="position:absolute;margin-top:1px;">' + cat.name + '</span><span class="fa fa-check-circle text-success d-none" style="position:absolute;margin-top:6px;right:15px;"></span></li>';
                    }
                    $('#categories').html(html);
                }
            });
            $('#postCategoryBox').modal('show');
        });
    });

    //从分类选择框选择分类
    function selectCat(obj) {
        $('#post_category').val($(obj).text());
        $('#post_category_id').val($(obj).data('id'));
        $(obj).find('.fa-check-circle').removeClass('d-none');
        $('#postCategoryBox').modal('hide');
    }

    //文章详情跳转
    function redirectArticle(obj) {
        window.location.href = "{:cmf_url('portal/Article/index')}?id=" + $(obj).data('id') + "&cid=" + $(obj).data('cid');
    }

    $(function() {
        var itemIndex = 0;
        var tab1LoadEnd = false;
        var tab2LoadEnd = false;
        var tab3LoadEnd = false;
        // tab
        $('.tab .item').on('click', function() {
            var $this = $(this);
            itemIndex = $this.index();
            $this.addClass('cur').siblings('.item').removeClass('cur');
            $('.lists').eq(itemIndex).show().siblings('.lists').hide();

            // 如果选中菜单一
            if (itemIndex == '0') {
                // 如果数据没有加载完
                if (!tab1LoadEnd) {
                    // 解锁
                    dropload.unlock();
                    dropload.noData(false);
                } else {
                    // 锁定
                    dropload.lock('down');
                    dropload.noData();
                }
                // 如果选中菜单二
            } else if (itemIndex == '1') {
                if (!tab2LoadEnd) {
                    // 解锁
                    dropload.unlock();
                    dropload.noData(false);
                } else {
                    // 锁定
                    dropload.lock('down');
                    dropload.noData();
                }
                // 如果选中菜单三
            } else if (itemIndex == '2') {
                if (!tab3LoadEnd) {
                    // 解锁
                    dropload.unlock();
                    dropload.noData(false);
                } else {
                    // 锁定
                    dropload.lock('down');
                    dropload.noData();
                }
            }

            // 重置
            dropload.resetload();
        });

        var pageStart = 0,
            pageEnd = 0,
            pageRecStart = 0,
            pageRecEnd = 0;

        // dropload
        var dropload = $('.content').dropload({
            scrollArea: window,
            loadDownFn: function(me) {
                // 加载菜单一的数据
                if (itemIndex == '0') {
                    pageStart++;
                    $.ajax({
                        type: 'GET',
                        url: '/api/portal/articles?page=' + pageStart,
                        dataType: 'json',
                        success: function(data) {
                            var result = '';
                            pageEnd = data.data.last_page;
                            if (pageStart <= pageEnd) {
                                for (var i = 0; i < data.data.data.length; i++) {
                                    var art = data.data.data[i];
                                    console.log(art)
                                    var cid = art.categories[0].id;
                                    var cname = art.categories[0].name;

                                    result += '<div data-id="' + art.id + '" data-cid="' + cid + '" class="card mb-3 border-0" onclick="redirectArticle(this)">' +
                                        '<div class="card-header bg-white">' + art['user_nickname'] + '<span class="float-right">' + art.friendly_time + ' 发布在 <b class="text-dark">' + cname + '</b></span></div>' +
                                        '<div class="card-body"><h6 class="card-title">' + art.post_title + '</h6>' +
                                        '<p class="card-text">' + art.post_excerpt + '</p></div>' +
                                        '<div class="card-footer bg-white text-muted">' + art.post_hits + '查看' + '</div>' +
                                        '</div>';

                                    if (pageStart == pageEnd) {
                                        // 数据加载完
                                        tab1LoadEnd = true;
                                        // 锁定
                                        me.lock();
                                        // 无数据
                                        me.noData();
                                    }
                                }
                                // 为了测试，延迟1秒加载
                                setTimeout(function() {
                                    $('.lists').eq(0).append(result);
                                    // 每次数据加载完，必须重置
                                    me.resetload();
                                }, 0);
                            }
                        },
                        error: function(xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                    // 加载菜单二的数据
                } else if (itemIndex == '1') {
                    $.ajax({
                        type: 'GET',
                        url: '/api/portal/categories',
                        dataType: 'json',
                        success: function(data) {
                            var result = '';
                            for (var i = 0; i < data.data.length; i++) {
                                var cat = data.data[i];
                                result += '<div class="card mb-3 border-0">' +
                                    '<div class="card-body">' +
                                    '<div class="media">' +
                                    '<img style="width:54px;" class="align-self-center mr-3" src="' + cat.more.thumbnail + '" alt="">' +
                                    '<div class="media-body">' +
                                    '<h5 class="mt-0">' + cat.name + '</h5>' +
                                    '<p class="mb-0">' + cat.description + '</p>' +
                                    '</div>' +
                                    '</div>' +
                                    '</div>' +
                                    '<div class="card-footer bg-white text-muted">帖子数：' + cat.post_count + '</div>' +
                                    '</div>';

                                // 数据加载完
                                tab2LoadEnd = true;
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function() {
                                $('.lists').eq(1).append(result);
                                // 每次数据加载完，必须重置
                                me.resetload();
                            }, 1000);
                        },
                        error: function(xhr, type) {
                            // alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                    // 加载菜单三的数据
                } else if (itemIndex == '2') {
                    pageRecStart++;
                    $.ajax({
                        type: 'GET',
                        url: '/api/portal/lists/recommended?page=' + pageRecStart,
                        dataType: 'json',
                        success: function(data) {
                            var result = '';
                            pageRecEnd = data.data.last_page;

                            if (pageRecStart <= pageRecEnd) {
                                for (var i = 0; i < data.data.data.length; i++) {
                                    var art = data.data.data[i];
                                    result += '<div data-id="' + art.id + '" data-cid="' + art.categories[0].id + '" class="card mb-3 border-0" onclick="redirectArticle(this)">' +
                                        '<div class="card-header bg-white">' + art['user_nickname'] + '</div>' +
                                        '<div class="card-body"><h6 class="card-title">' + art.post_title + '</h6>' +
                                        '<p class="card-text">' + art.post_excerpt + '</p></div>' +
                                        '<div class="card-footer bg-white text-muted">' + art.post_hits + '查看' + '</div>' +
                                        '</div>';


                                    if (pageRecStart == pageRecEnd) {
                                        // 数据加载完
                                        tab3LoadEnd = true;
                                        // 锁定
                                        me.lock();
                                        // 无数据
                                        me.noData();
                                    }
                                }
                                // 为了测试，延迟1秒加载
                                setTimeout(function() {
                                    $('.lists').eq(2).append(result);
                                    // 每次数据加载完，必须重置
                                    me.resetload();
                                }, 0);
                            }
                        },
                        error: function(xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    });
                }
            }
        });
    });
    </script>
</body>

</html>